<template>
	<view>
		<view class="peisong-box">
			<view>请选择配送方式</view>
			<view class="peisongType">
				<radio-group name="peisongType" @change="selectPeisong">
					<!-- <view>
						<label>
							<radio :value="ziti" :checked="type==ziti" /><text>自提</text>
						</label>
					</view> -->
					<view>
						<label>
							<radio :value="kuaidi" :checked="type==kuaidi" /><text>快递</text>
						</label>
					</view>
				</radio-group>
			</view>
			<view class="dizhi-wrapper" v-show="type=='kuaidi'">
				<view class="dizhi-box">
					<view class="dizhi-info">
						<view>收货人：{{adName}}</view>
						<view>收货地址：<text class="moren">[默认]</text> {{adDetail}}</view>
					</view>
					<view class="tel">
						{{adPhone}}
					</view>
				</view>
				<view class="other-box" @click="otherDizhi()">其他地址 <uni-icons type="arrowright" size="20"></uni-icons></view>
			</view>
			<view class="dizhi-wrapper" v-show="type=='ziti'">
				<view class="dizhi-box">
					<view class="dizhi-info">
						<view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
							<view>自提点：{{zitiName}}</view>
							<view>
								{{zitiPhone}}
							</view>
						</view>
						<view>自提地址：{{zitiAddress}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tips tips2">商品信息</view>
		<view class="goods-info">
			<view>
				<image :src="switchImg(gImages)" class="goods-img" mode="heightFix"></image>
			</view>
			<view class="goods-name">
				<view>
					<view>{{gName}}</view>
					<view class="qian">{{gPrice}}/{{gdanwei}}</view>
				</view>
				<view>
					<view class="guige">{{guige | resetGuige}}</view>
					<view>×1</view>
				</view>
			</view>
		</view>
		<view class="peisong-box xingzhi">
			<view class="bot-border">此商品性质不支持7天退货</view>
			<view class="yunfei-box" v-if="type==kuaidi">
				<view>运费</view>
				<view>{{yunfei}}元</view>
			</view>
			<view>
				<view>买家留言：<input type="text" v-model="liuyan" placeholder="选填:对本次交易的说明" style="border: 1rpx #CCCCCC solid;padding: 15rpx;" /></view>
			</view>
		</view>
		<view class="bottom">
			<view>
				共<text>1</text>件 总金额：<text class="qian">{{gPrice}}</text>
			</view>
			<view class="confirm-btn" @click="goPay()">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ziti:"ziti",
				kuaidi:"kuaidi",
				type:'',
				liuyan:"",
				adName:"",		// 收货人信息
				adDetail:"",	// 收货地址
				adPhone:"",		// 收货人电话
				cartid:'',		// 购物车id
				cartSum:"",		// 购物车总金额
				gImages:"",		// 商品图片
				gName:"",		// 商品名称
				gPrice:"",		// 商品价格
				gdanwei:"",		// 商品单位
				guige:"",		// 商品规格
				gid:"",			// 商品编号
				adid:"",		// 收货地址id
				allMoney:0,		// 总价格
				yunfei:0,		// 运费
				
				zitiId:'',		// 自提点ID
				zitiName:'',	// 自提点名称
				zitiAddress:'',	// 自提点地址
				zitiPhone:'',	// 自提点电话
			}
		},
		onLoad(opt) {
			this.cartid = opt.id;
			if(!this.isNull(opt.liuyan)){
				this.liuyan = opt.liuyan;
			}
			
			//选中的自提点
			this.type = opt.type;
			this.zitiId = opt.zitiId;
			this.zitiName = opt.zitiName;
			this.zitiAddress = opt.zitiAddress;
			this.zitiPhone = opt.zitiPhone;
			
			let uid = uni.getStorageSync('usersId');
			// xieliancat.do?p=getAllAddressAndGoods
			// 查询购物车中的商品
			this.$http.get('/xieliancat.do?p=getAllAddressAndGoods', {
					'catid[]':this.cartid,
					"userid":uid
			}).then(res => {
				this.gid = res.data.catlist[0].goods.gid;
				this.cartSum = res.data.sum;
				this.gName = res.data.catlist[0].goods.gName;
				this.gPrice = res.data.catlist[0].money;
				this.gdanwei = res.data.catlist[0].goods.gdanwei;
				this.gImages = res.data.catlist[0].goods.gImages;
				if(res.data.catlist[0].guiges)
					this.guige = res.data.catlist[0].guiges;
			})
			uni.$on('getDizhi',this.getDizhi);
		},
		methods: {
			// 选择配送方式
			selectPeisong(res){
				this.type = res.detail.value;
				console.log("来了："+this.type)
				if(this.type=='kuaidi'){// 选择快递
					this.getDizhi();
				}else if(this.type=='ziti'){	//选择自提 
					uni.navigateTo({
						url:'selectZitiDian/zitidianList?cartid='+this.cartid+'&liuyan='+this.liuyan+'&gid='+this.gid+'&getBack=2'
					})
				}
			},
			// 获取收货地址
			getDizhi(){
				let uid = uni.getStorageSync('usersId');
				this.$http.get('/xieliancat.do?p=getAllAddress', {
						'userid':uid
				}).then(res => {
					this.adid = res.data.adId	;
					this.adName = res.data.adName;
					this.adDetail = res.data.adDetail;
					this.adPhone = res.data.adPhone;
				})
			},
			// 点击提交订单
			goPay(){
				if(this.type==''){
					this.$u.toast("请选择收货方式")	;
					return;
				}
				if(this.gPrice < 0){
					this.$u.toast("金额小于0，请联系商家更改商品信息！");
					return;
				}
				let uid = uni.getStorageSync('usersId');
				let yunfei = 0;
				let index=-1;
				if(this.type=='ziti'){
					index=0;
					this.adid = this.zitiId;
				}else if(this.type=='kuaidi'){
					index=1;
				}
				if(this.isNull(this.adid)){
					this.$u.toast("请选择收货地址");
					return;
				}
				this.$http.post('/xielianorder.do?p=submitCartOrderByMini', {
						'userid':uid,
						"catid[]":this.cartid,
						"adid":this.adid,
						"beizhu":this.liuyan,
						"yunfei":yunfei,
						"price":this.gPrice,
						"index":index
				}).then(res => {
					let gid = this.gid;
					this.type='';
					let orid = res.data;//返回的订单ID
					if(orid=="找不到购物车"){
						this.$u.toast("找不到购物车！");
						return;
					}
					if(orid=="找不到商品"){
						this.$u.toast("找不到商品！");
						return;
					}
					if(orid=="库存不足"){
						this.$u.toast("库存不足！");
						return;
					}
					// 删除购物车  xielianorder.do?p=deleteCat
					this.$http.post('/xielianorder.do?p=deleteCat', {
							'catid[]':this.cartid
					}).then(res => {
						if(res.data=='删除成功'){	// 更新购物车页面
							uni.$emit('checkCart');
							uni.$emit("getOrderByGroup");
							// 跳转到支付页面
							uni.navigateTo({
								url:'SubmitOrder?gid='+gid+"&orid="+orid
							})
						}
					})
				})
			},
			// 设置图片路径
			switchImg(s){
				return this.host+s;
			},
			// 点击其他地址
			otherDizhi(){
				uni.navigateTo({
					url:'../center/shouHuo?from=2'
				})
			},
			// 判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		},
		filters:{
			resetGuige(s){
				let reg = /{/g;
				let reg2 = /}/g;
				return s.replace(reg,'').replace(reg2,'');
			}
		}
	}
</script>

<style scoped>
	.peisong-box{
		padding: 20rpx;
		background-color: white;
	}
	.dizhi-box{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}
	.peisongType view{
		margin-top: 25rpx;
		padding-bottom: 25rpx;
		border-bottom: 1rpx #c8ccd4 solid;
	}
	.xingzhi{
		margin-top: 20rpx;
		padding-top: 0rpx;
	}
	.xingzhi>view{
		padding: 10rpx;
	}
	.bot-border,.yunfei-box{
		border-bottom: 1rpx solid #F4F4F5;
		height: 100rpx;
		line-height: 100rpx;
	}
	.tips{
		margin-top: 20rpx;
		background-color: white;
		padding-top: 20rpx;
		padding-left: 20rpx;
		font-size: 22rpx;
	}
	.tips2{
		padding-bottom: 20rpx;
	}
	.confirm-btn{
		background-color: #FF7900;
		color: white;
		display: flex;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0rpx 60rpx;
	}
	.dizhi-box .dizhi,.dizhi-box .mapdot{
		flex: 1;
		margin-right: 20rpx;
	}
	.dizhi-box .dizhi-info{
		flex: 5;
	}
	.moren{
		color: red;
	}
	.other-box{
		display: flex;
		justify-content: flex-end;
		margin-top: 10rpx;
	}
	.yunfei-box{
		display: flex;
		justify-content: space-between;
	}
	.dizhi-box .tel{
		flex: 2;
	}
	.bottom{
		padding-left: 10rpx;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background: #F4F4F5;
		display: flex;
		justify-content: space-between;
	}
	.bottom text{
		color: red;
	}
	.goods-info{
		margin-top: 20rpx;
		display: flex;
		padding: 10rpx;
		height: 140rpx;
		align-items: flex-start;
		color: #111111;
		background-color: white;
	}
	.goods-info>view{
		flex: 1;
	}
	.guige{
		margin-top: 10rpx;
		color: #CCCCCC;
	}
	.qian::before{
		content: '￥';
	}
	.goods-name>view{
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}
	.goods-info>view:nth-child(2){
		flex: 4;
	}
	.goods-info .goods-img{
		height: 100rpx;
		width: 100rpx;
	}
</style>
